<template>
  <div class="ProductionStaff">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input v-model="search.key" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item><el-button type="primary" @click="onsubmit">查询</el-button></el-form-item>
      </el-form>
      <el-button class="ebtn" type="warning" @click="staff">员工借调</el-button>
    </div>
    <el-table :data="ListData" stripe style="margin: 10px 20px;width: calc( 100% - 40px)" :height="autoHeightTable" show-overflow-tooltip>
      <el-table-column prop="xuhao" type="index" label="序号" width="100" align="center"></el-table-column>
      <el-table-column prop="number" label="编号"  align="center"></el-table-column>
      <el-table-column prop="name" label="姓名"  align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center"></el-table-column>
      <el-table-column prop="phone" label="联系方式"  align="center"></el-table-column>
      <el-table-column prop="bumen" label="部门"  align="center"></el-table-column>
      <el-table-column prop="zhiwu" label="职务"  align="center"></el-table-column>
      <!--<el-table-column prop="states" label="状态" align="center"></el-table-column>-->
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <!--<el-button size="small" type="warning" @click="GotoPg(scope.row.Id,null)">编辑</el-button>-->
          <el-button type="primary" size="small" @click="GotoPg(scope.row.Id,1)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="current"
      :page-size="pagesize"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 78;
    }
  },
  data() {
    return {
      search:{ key: "",start:"",end:"" },
      ListData:[],
      total: 1,
      current: 1,
      pagesize: 10,
    };
  },
  created() {
    this.LoadCount()
    this.LoadContents()
  },
  methods: {
    handleCurrentChange(e) {
      this.current=e;
      this.LoadContents();
    },
    LoadCount(){
      let jsondata={
        pn:0,
        PerPageSize:0,
        key: this.search.key,
        start: this.search.start,
        end: this.search.end,
      }
      let jsondata_str=JSON.stringify(jsondata)
      axios("/apis/ProductionMamage.asmx/LoadCount?index=" + 1 + "&jsondata=" + jsondata_str).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var result = JSON.parse(datas.int.__text);
        this.total =result;
      });
    },
    LoadContents(){
      let jsondata={
        pn:this.current-1,
        PerPageSize:this.pagesize,
        key: this.search.key,
        start: this.search.start,
        end: this.search.end,
      }
      let jsondata_str=JSON.stringify(jsondata)
      console.log(jsondata_str)
      axios("/apis/ProductionMamage.asmx/LoadContents?index=" + 1 + "&jsondata=" + jsondata_str).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var result = JSON.parse(datas.string.__text);
        this.ListData=result;
        console.log(result)
      });
    },
    onsubmit() {
      this.LoadCount()
      this.LoadContents()
    },

    chage(e) {
      if (e) {this.search.start=e[0]; this.search.end=e[1];}
      else {this.search.start='';this.search.end='';}
    },
    GotoPg(id,edit) { this.$router.push({path: "./Newsupply", query: { id: id,edit:edit }});  },
    staff() { this.$router.push("/StaffSeconded"); },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.ProductionStaff { }
.ProductionStaff .search{height: 50px;border-radius: 5px;background-color: #fff;padding-left: 20px;padding-top: 10px; margin:0 20px 20px;}
.ProductionStaff .demo-form-inline {display: inline-block;}
.ProductionStaff .el-pagination {margin-top: 15px;text-align: center;}
.ProductionStaff .ebtn {float: right;margin-right: 20px;}
</style>
